<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Detail',
})
</script>
<script setup>
import Upload from '@/components/app/upload.vue'
import { customerDataList } from '@/data'
import { deepClone, isEmpty,customerStatus } from '@/utils'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const form = ref()
let temp = {
  num:1,
  time:'2020-11-08'
}
form.value = temp
const tableData = ref()
tableData.value = customerDataList
const dialogVisible = ref(false)

const queryForm = ref({
		type:'',
})

const show = (val) => {
  if (!isEmpty(val)) {
   
  } else {
    
  }
  dialogVisible.value = true
}

const cancel = (done) => {
  dialogVisible.value = false
}

const emits = defineEmits(['getDialogueData'])
defineExpose({
  show,
})
</script>
<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      title="查看详情"
      width="1000px"
      :before-close="cancel"
    >
    <div class="app-flex-left">
			<el-radio-group v-model="queryForm.type" size="large">
        <el-radio-button label="total" >客户总数</el-radio-button>
        <el-radio-button label="new" >新增人数</el-radio-button>
        <el-radio-button label="lossing" >流失人数</el-radio-button>
		</el-radio-group>
    <span class="app-words-tip-weak app-gap-words-left">管理权限范围不同，展示的客户详情数据也不同哦～</span>
		</div>
    <div class="app-gap-block-top">
    共{{ form.num }}个客户<span class="app-words-tip-weak app-gap-words-left">|</span><span class="app-gap-words-left app-words-tip-weak">{{form.time}}</span>
    </div>
    <div class="app-gap-block-top">
					<el-table class="app-select-table app-container-radius" :data="tableData" style="width:100%">
						<el-table-column width="140" prop="createTime" label="全部客户" align="left">
              <template #default="scope">
                <div class="app-flex-left">
                <el-avatar
                          class="cho-margin"
                          shape="square"
                          :size="30"
                          :src="scope.row.avatar"
                        />
                <span class="app-gap-words-left">
                {{ scope.row.name }}
                </span>
                </div>
						</template>
					</el-table-column>
          	<el-table-column prop="staffName" label="所属客服" align="left" />
              <el-table-column label="客户评分" align="left">
              <template #default="scope">
                <div class="app-flex-left">
                <el-tag type="primary">
                   <div class="app-flex-left">
                   <div>
                 <MyIcon class="app-icon app-primary-font" name="Star" />
                </div>
                 <div class="app-gap-words-left-xs">
                
                 <span class="">
                {{ scope.row.score }}
               
                </span>
                <div class="app-star-bottom"></div>
                 </div>

                </div>
                </el-tag>
                </div>
						</template>
          </el-table-column>
           <el-table-column label="标签" align="left">
              <template #default="scope">
                <div class="">
                  <el-tag class="app-br-10" v-for="(item,index) in scope.row.tags" :key="index">
                  <span class="app-regular-font ">{{item}}</span>
                  </el-tag>
           
                </div>
						</template>
          </el-table-column>
          <!-- <el-table-column label="客户积分" align="left">
              <template #default="scope">
                <div class="app-flex-left">
                <el-tag type="warning" >
                <div class="app-flex-left">
                   <div>
                 <MyIcon class="app-icon app-warning-font" name="Star" />
                </div>
                 <div class="app-gap-words-left-xs">
                
                 <span class="">
                {{ scope.row.intergrator }}
               
                </span>
                <div class="app-star-bottom"></div>
                 </div>

                </div>
               
              
                
                </el-tag>
                </div>
						</template>
          </el-table-column> -->
          
          <el-table-column label="客户状态" align="left">
              <template #default="scope">
                <div class="app-flex-left">
                 {{ customerStatus[scope.row.status]['name'] }}
           
                </div>
						</template>
          </el-table-column>
          <el-table-column label="添加时间" prop="createTime" align="left">
          </el-table-column>
           <el-table-column width="140" label="上次对话时间" prop="lastchatTime" align="left">
          </el-table-column>
           <el-table-column label="添加渠道" prop="source" align="left">
          </el-table-column>
           <el-table-column label="操作" align="left">
              <template #default="scope">
                <!-- <div class="app-flex-left">
                 {{ customerStatus[scope.row.status]['name'] }}
           
                </div> -->
						</template>
          </el-table-column>
						
					</el-table>
			</div>
    
    </el-dialog>
  </div>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
